<template>
    <div>
        <!-- 系统时间区域 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    北京时间是：{{new Date().toLocaleString()}}
                </div>
            </el-col>       
        </el-row>
        <!-- 2.商品信息区域 -->
        <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content-two bg-purple">库存统计</div></el-col>
            <el-col :span="6"><div class="grid-content-two bg-purple">会员总计</div></el-col>
            <el-col :span="6"><div class="grid-content-two bg-purple">今日退款</div></el-col>
            <el-col :span="6"><div class="grid-content-two bg-purple">今日成交</div></el-col>
        </el-row>
        <!-- 3.echarts图表区域 -->
        <el-row>
            <el-col :span="24">
                <!-- 指定承载echarts图表的容器 容器一定要有大小-->
                <div class="grid-content-three bg-purple-dark" ref="bar">
                    
                </div>
            </el-col>       
        </el-row>
    </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
export default {
    mounted() {
        //绘制柱状图
        this.getBar()
    },
    methods: {
        //1.绘制柱状图
        getBar(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(this.$refs.bar);
            //1.2设置绘图的基本配置项
            let options = {
                title: {//图表的标题
                    text: 'ECharts 入门示例'
                },
                //配置提示语
                tooltip: {},
                //配置图例
                legend: {
                    data: ['销量']
                },
                //配置X轴
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                //配置y轴
                yAxis: {},
                //配置图表系列（需要绘制图表的类型）
                series: [
                    {
                        name: '销量',
                        type: 'bar',//绘制柱状图 line 折线图
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            }
            //1.3实用配置下完成图表的绘制
            myChart.setOption(options)
        }
    },
};
</script>

<style scoped lang="less">

.el-row {
    margin-bottom: 20px;
        &:last-child {
        margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 40px;
        line-height: 40px;
        padding: 5px;
        margin-top: 20px;
    }
    .grid-content-two {
        border-radius: 4px;
        min-height: 100px;
        padding: 5px;
    }
    .grid-content-three {
        border-radius: 4px;
        min-height: 500px;
    }
    
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
